<template>
  <div class="orders">
    <div class="orders_header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="orders_list_box">
      <div class="orders_list_box_box">
        <div class="orders_list_box_search">
          <el-input
            placeholder="请输入内容"
            v-model="searchval"
            clearable
            @clear="change"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
        </div>
        <div class="user_list_box_body">
          <el-table :data="ordersdata" border style="width: 100%">
            <el-table-column prop="order" label="#" width="100">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="order_number" label="订单编号" width="197">
            </el-table-column>
            <el-table-column prop="order_price" label="订单价格" width="197">
            </el-table-column>
            <el-table-column prop="pay_status" label="是否付款" width="197">
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.pay_status == 0"
                  >未付款</el-tag
                >
                <el-tag type="success" v-else>已付款</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="is_send" label="是否发货" width="197">
            </el-table-column>
            <el-table-column prop="create_time" label="下单时间" width="197">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit"></el-button>
                <el-button
                  type="success"
                  icon="el-icon-map-location"
                  @click="openlogistics(scope.row.order_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentpage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>

        <el-dialog title="物流信息" :visible.sync="dialoglogistics">
          <el-steps direction="vertical" :active="dialoglogisticsdata.length">
            <el-step
              :title="item.context"
              :description="item.time"
              v-for="(item, index) in dialoglogisticsdata"
              :key="index"
            >
            </el-step>
          </el-steps>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getorders, getlogistics } from "@/api/orders.js";
export default {
  data() {
    return {
      ordersdata: [], // 用户数据
      total: 0, //总用户数,
      currentpage: 1, // 当前页,
      pagesize: 5, // 每页几条数据
      searchval: "", //搜索内容
      dialoglogistics: false, //物流信息的 弹框
      dialoglogisticsdata: [], //物流信息的 展示
    };
  },
  mounted() {
    // 用户数据
    this.getordersdata();
  },
  methods: {
    // 用户数据
    getordersdata() {
      getorders({
        data: {
          query: this.searchval,
          pagenum: this.currentpage,
          pagesize: this.pagesize,
        },
      }).then((res) => {
        this.ordersdata = res.data.goods;

        this.total = res.data.total;
        console.log(res.data.goods);
      });
    },
    handleCurrentChange(val) {
      // 当前页
      this.currentpage = val;
      // console.log(114, this.currentpage);
      this.getordersdata();
    },
    handleSizeChange(val) {
      //每页条数发生改变
      console.log(121, val);
      this.pagesize = val;
      this.getordersdata();
    },
    // 点击搜索
    search() {
      this.getordersdata();
    },
    // 清空时 自动触发
    change() {
      this.getordersdata();
    },
    //物流信息弹框
    openlogistics() {
      this.dialoglogistics = true;
      getlogistics().then((res) => {
        console.log(res);
        this.dialoglogisticsdata = res.data;
      });
    },
  },
  components: {},
};
</script>

<style lang='scss'>
.orders {
  width: 100%;
  height: 100%;
  background: #eee;
  .orders_header {
    width: 100%;
    height: 80px;
    // line-height: 80px;
    padding-top: 30px;
    padding-left: 40px;
  }
  .orders_list_box {
    width: 100%;
    height: calc(100% - 80px);
    .orders_list_box_box {
      width: 95%;
      height: 100%;
      background: #fff;
      margin: 0 auto;
      .orders_list_box_search {
        width: 95%;
        height: 80px;
        margin: 0 auto;
        line-height: 80px;
        .input-with-select {
          width: 400px;
        }
        .add_user {
          margin-left: 20px;
        }
      }
      .user_list_box_body {
        width: 95%;
        height: calc(100% - 80px);
        margin: 0 auto;
      }
    }
  }
}
</style>
